<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖</title>
</head>
<body>

    <input type="text" id="search" />
    <button id="btn">发ajax</button>

    <script src="libs/zepto/zepto.js"></script>
    <script src="libs/zepto/event.js"></script>
    <script src="libs/zepto/ajax.js"></script>
    <script>
       
       function inputAjax(value) {
           //ajax
           console.log('防抖');
           $.ajax({
               url: `http://youyong.ba:8080/mock/609a94bd9fdbd7143b8d6737/aa/manage/list/index?keyword=${value}`,
               success: function (res) {
                console.log(res);
               }
           })
       }
       //防抖方法
       function debounce(fun, delay) {
            var timer;
            return function (args) {
                var that = this;

                clearTimeout(timer);

                // timer = setTimeout(function () {
                //     fun.call(that, args)
                //     // fun(args);
                // },delay)

                timer = setTimeout(fun.bind(this,args),delay);
            }
        }
        var InputFn = debounce(inputAjax, 1000);
        
        $('#search').off("keyup").on("keyup", function (e) {
           
            InputFn(this.value);
            // inputAjax(this.value)
        })
        
        
    </script>
</body>
</html>